<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <title>Machinaris Logs</title>
    <style>
        body {
            background-color: #15171a;
            color: #c7c7c7;
        }

        .rounded-3 {
            border-radius: .5rem !important;
            background-color: #212529 !important;
            -webkit-box-shadow: 0px 1px 0px 0px #000;
            box-shadow: 0px 1px 0px 0px #000;
            border: 0 !important;
            margin: 10px;
            padding: 10px;
            padding-top: 20px;
            white-space: pre-wrap;
            font-family: monospace;
            overflow-y: auto;
        }
    </style>
    <script>
        function get(name) {
            if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(location.search))
                return decodeURIComponent(name[1]);
        }
        function load_log_file() {
            var output = document.getElementById('output');
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "{{ url_for('logfile') }}?log=" + get('log') + "&log_id=" + get('log_id'));
            xhr.send();
            xhr.onload = function () {
                output.textContent = xhr.responseText;
                if (document.getElementById('autoscroll').checked == 1) {
                    console.log("Autoscrolling on new log content...")
                    document.getElementById('output').scrollIntoView(false);
                }
                setTimeout(load_log_file, 5000); // Load again in 5 seconds
            };
        }
    </script>
</head>

<body>
    <div class="position-relative">
        <div class="position-absolute top-0 end-0">
            <span style="padding:20px"><input id="autoscroll" name="autoscroll" type="checkbox" checked="checked" />
                Autoscroll</span>
        </div>
    </div>

    <div class="rounded-3 small" id="output">
    </div>
    <script>
        load_log_file(); // Load once initally
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
        crossorigin="anonymous"></script>
</body>

</html>